import { Form, Input, Button, Select } from 'antd'
import React, { useRef, useState } from 'react'
import Child1 from './children/child'
import Child2 from './children/child2'
const Page3 = () => {
  const formRef = useRef()
  const [parentData, setParentData] = useState('')
  const { Option } = Select
  const layout = {
    labelCol: {
      span: 8,
    },
    wrapperCol: {
      span: 16,
    },
  }
  const tailLayout = {
    wrapperCol: {
      offset: 8,
      span: 16,
    },
  }
  const onGenderChange = (value) => {
    switch (value) {
      case 'male':
        formRef.current.setFieldsValue({
          note: 'Hi, man!',
        })
        return

      case 'female':
        formRef.current.setFieldsValue({
          note: 'Hi, lady!',
        })
        return

      case 'other':
        formRef.current.setFieldsValue({
          note: 'Hi there!',
        })
    }
  }
  const onFinish = (values) => {
    console.log(values)
  }
  const onReset = () => {
    formRef.current.resetFields()
  }
  const onFill = () => {
    formRef.current.setFieldsValue({
      note: '我是填充的默认值',
      gender: 'male',
    })
  }
  return (
    <Form {...layout} ref={formRef} name="control-ref" onFinish={onFinish}>
      <Form.Item
        name="note"
        label="Note"
        rules={[
          {
            required: true,
          },
        ]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        name="gender"
        label="Gender"
        rules={[
          {
            required: true,
          },
        ]}
      >
        <Select
          placeholder="Select a option and change input text above"
          onChange={onGenderChange}
          allowClear
        >
          <Option value="male">male</Option>
          <Option value="female">female</Option>
          <Option value="other">other</Option>
        </Select>
      </Form.Item>
      <Form.Item
        noStyle
        shouldUpdate={(prevValues, currentValues) => prevValues.gender !== currentValues.gender}
      >
        {({ getFieldValue }) =>
          getFieldValue('gender') === 'other' ? (
            <Form.Item
              name="customizeGender"
              label="Customize Gender"
              rules={[
                {
                  required: true,
                },
              ]}
            >
              <Input />
            </Form.Item>
          ) : null
        }
      </Form.Item>
      <Form.Item {...tailLayout}>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
        <Button htmlType="button" onClick={onReset}>
          Reset
        </Button>
        <Button type="link" htmlType="button" onClick={onFill}>
          Fill form
        </Button>
        <span> 我是父组件数据</span>
        <Child1 name={parentData} setParentData={setParentData}></Child1>
        <Child2 name={parentData}></Child2>
        <Button htmlType="button" onClick={() => setParentData('我是父组件传递过来的数据')}>
          父子组件传参测试
        </Button>
      </Form.Item>
    </Form>
  )
}

export default Page3
